<template>
  <view class="container">
	  <!-- 搜索框 -->
	  <view class="search-bar">
	    <input
	      class="search-input"
	      type="text"
	      v-model="keyword"
	      placeholder="请输入电站编号/业主姓名/地址"
	      confirm-type="search"
	      @confirm="onSearch"
	    />
	    <view class="search-btn" @click="onSearch">搜索</view>
	  </view>
    <!-- 顶部标签页 -->
    <view class="tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab', activeTab === index ? 'active' : '']"
        @click="switchTab(index)"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 订单列表 -->
    <view v-if="orders.length > 0">
      <view
        v-for="(order, index) in orders"
        :key="order.id"
        class="order-card"
        @click="goToDetail(order.id)"
      >
		<view class="order-header">
		  <view class="order-info">
			<text class="address">{{ order.stationno }} - {{ order.guestname }}</text>
			<text class="address">{{ order.addressstring }}</text>
		  </view>
			<view class="status-tags">
			  <view class="status-tag" :style="{ backgroundColor: getStatusColor(order.status) }">
				<dict-label dict-type="oper_fault_status" :value="order.status" />  
			  </view>
			  <view class="status-tag" :style="{ backgroundColor: getTypeColor(order.type) }"> <!-- 使用固定颜色或定义新的颜色方法 -->
				<dict-label dict-type="oper_station_form_type" :value="order.type" />
			  </view>
			</view>
		</view>
        <view class="order-body">
		  <text class="time" v-if="order.status == 1">🕒 派单时间：{{ parseTime(order.dispatchTime) }}</text>
          <text class="time" v-if="order.status == 2">🕒 接单时间：{{ parseTime(order.takeTime) }}</text>
          <text class="time" v-if="order.status == 3">🕒 完成时间：{{ parseTime(order.operTime) }}</text>  
		  <text class="time" v-if="order.status == 5">🕒 完成时间：{{ parseTime(order.operTime) }}</text>
		  <text class="time" v-if="order.status == 6">🕒 完成时间：{{ parseTime(order.operTime) }}</text>
				
		  <text class="reason">🔧 故障原因：{{ order.description }}</text>
		  <text class="reason">💰 本单金额：{{ order.price }}</text>
		  <text class="reason" v-if="order.status == 6">❌ 不通过原因：{{ order.approveSuggestion }}</text>
        </view>
		
		  <!-- 底部操作按钮 -->
		 <view class="order-footer">
<!-- 		   <view class="action-btn plain" @click.stop="goToDetail(order.id)">
		     查看详情
		   </view> -->
		   <view class="action-btn primary" @click.stop="goToDetail(order.id)" v-if="[1,2].includes(order.status)">
		     <dict-label dict-type="oper_fault_node" :value="order.node" />
		   </view>
		   <view class="action-btn primary" @click.stop="goToDetail(order.id)" v-if="[6].includes(order.status)">
		     重新提交
		   </view>
		 </view>
      </view>
    </view>

    <!-- 无订单提示 -->
	<view v-else class="no-orders">
	  <text>当前页签下暂无订单</text>
	</view>

    <!-- 加载中 -->
    <view class="load-more" v-if="loadingMore">加载中...</view>
  </view>
</template>


<script>
import * as faultApi from '@/api/oper/fault/fault.js';
import {parseTime} from '@/utils/ruoyi.js';

	
	
export default {
  data() {
    return {
      tabs: [
        { label: '待接单', status: 1 },
        { label: '进行中', status: 2 },
        { label: '已完成', status: 3 },
		{ label: '待审核', status: 5 },
		{ label: '不通过', status: 6 },
      ],
      activeTab: 0,
      orders: [],
      pageNo: 1,
      pageSize: 10,
      loadingMore: false,
      finished: false,
	  keyword : '',
    };
  },
  onLoad() {
    this.loadOrders();
  },
  onPullDownRefresh() {
    this.pageNo = 1;
    this.finished = false;
    this.loadOrders();
  },
  onReachBottom() {
    if (!this.finished) {
      this.pageNo++;
      this.loadOrders();
    }
  },
  methods: {
	  parseTime,
    switchTab(index) {
      this.activeTab = index;
      this.pageNo = 1;
      this.finished = false;
      this.loadOrders();
    },
	  getStatusColor(status) {
		switch (status) {
		  case 1: return '#ff9500'; // 待接单（橙色）
		  case 2: return '#007aff'; // 进行中（蓝色）
		  case 3: return '#00c851'; // 已完成（绿色）
		  case 4: return '#9e9e9e'; // 挂起（灰色）
		  default: return '#cccccc'; // 默认灰色
		}
	  },
	  getTypeColor(type) {
	  		switch (type) {
	  		  case 'FA': return '#FF0000'; 
	  		  case 'XJ': return '#666000'; 
	  		  case 'SEC': return '#FF7088'; 
	  		  case 'INS': return '#55FF55'; 
			  case 'ZX': return '#55FF55';
	  		  default: return '#cccccc'; 
	  		}
	  },
	onSearch() {
	  this.pageNo = 1;
	  this.loadOrders();
	  this.finished = false;
	},  
	  
    async loadOrders() {
      this.loadingMore = true;
      const status = this.tabs[this.activeTab].status;
      // 替换为实际的 API 请求
      const res = await faultApi.getFaultPage({ 	
			status : status, 
			pageNo : this.pageNo, 
			pageSize: this.pageSize,
			keyword: this.keyword?.trim() });
      if (this.pageNo === 1) {
        this.orders = res.data.list;
      } else {
        this.orders = [...this.orders, ...res.data.list];
      }
      this.loadingMore = false;
      if (res.data.length < this.pageSize) {
        this.finished = true;
      }
      uni.stopPullDownRefresh();
    },
    goToDetail(orderId) {
      uni.navigateTo({ url: `/pages/order/detail?orderId=${orderId}` });
    },
	  handleAction(order) {
	    // 你可以打开一个处理页面或者弹窗
	    uni.showToast({
	      title: `处理订单 ${order.id}`,
	      icon: 'none'
	    });
	  },
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.search-bar {
  display: flex;
  background-color: #fff;
  padding: 10rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-input {
  flex: 1;
  height: 64rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 32rpx;
  font-size: 28rpx;
  background-color: #f9f9f9;
}

.search-btn {
  margin-left: 20rpx;
  background-color: #007aff;
  color: #fff;
  padding: 0 30rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
}
.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 10rpx 0;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-weight: bold;
  color: #666;
  border-bottom: 4rpx solid transparent;
  transition: all 0.3s;
}
.tab.active {
  color: #007aff;
  border-color: #007aff;
}

.order-card {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10rpx; /* 可选 */
}

.order-info {
  max-width: 75%; /* 防止地址占据整行空间 */
  display: flex;
  flex-direction: column;
}

.address {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx; /* 可选 */
}
.status-tags {
  display: flex;
  gap: 10rpx; /* 标签之间的间距 */
  margin-left: 10rpx; /* 与左侧内容的间距 */
  align-items: center;
}

.status-tag {
  font-size: 24rpx;
  color: #fff;
  padding: 6rpx 14rpx;
  border-radius: 12rpx;
  white-space: nowrap; /* 防止标签文字换行 */
}

.order-body text {
  display: block;
  margin-bottom: 10rpx;
  color: #666;
  font-size: 26rpx;
}

.no-orders {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 100rpx;
}
.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.load-more {
  text-align: center;
  color: #999;
  padding: 30rpx 0;
  font-size: 26rpx;
}
.order-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 24rpx;
}

.action-btn {
  padding: 14rpx 28rpx;
  font-size: 26rpx;
  border-radius: 32rpx;
  text-align: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  user-select: none;
}

.action-btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.action-btn.primary {
  background-color: #007aff;
  color: #fff;
}

.action-btn.plain {
  background-color: #f6f7f9;
  color: #333;
  border: 1rpx solid #ddd;
}
</style>
